<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../static/blog/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../static/blog/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>

<body>
  <div class="header">
    <div class="menu-btn">
      <div class="menu"></div>
    </div>
    <h1 class="logo">
      <a href="index.html">
        <span>我的书评</span>
      </a>
    </h1>    
  
  <center>
    <div>期刊类型占比图 
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:350px;"></div>
    <script src="../static/blog/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
        	    tooltip: {
        	        trigger: 'item',
        	        formatter: '{a} <br/>{b}: {c} ({d}%)'
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 10,
        	        data: ['医学期刊', '影视期刊', '科技期刊', '旅游期刊', '时尚期刊','生活期刊','教育期刊','美食期刊']
        	    },
        	    series: [
        	        {
        	            name: '期刊类型',
        	            type: 'pie',
        	            radius: ['50%', '70%'],
        	            avoidLabelOverlap: false,
        	            label: {
        	                show: false,
        	                position: 'center'
        	            },
        	            emphasis: {
        	                label: {
        	                    show: true,
        	                    fontSize: '30',
        	                    fontWeight: 'bold'
        	                }
        	            },
        	            labelLine: {
        	                show: false
        	            },
        	            data: [
        	                {value: 335, name: '医学期刊'},
        	                {value: 310, name: '影视期刊'},
        	                {value: 234, name: '科技期刊'},
        	                {value: 135, name: '旅游期刊'},
        	                {value: 1000, name:'时尚期刊'},
        	                {value: 132, name:'生活期刊'},
        	                {value: 154, name:'教育期刊'},
        	                {value: 128, name:'美食期刊'}
        	            ]
        	        }
        	    ]
        	};
        myChart.setOption(option);
        </script>
    </div>
  </center>
    	
  <script type="text/javascript" src="../static/blog/layui/layui.js"></script>
  <script type="text/javascript">
    layui.config({
      base: '../static/blog/js/util/'
    }).use(['element','laypage','jquery','menu'],function(){
      element = layui.element,laypage = layui.laypage,$ = layui.$,menu = layui.menu;
      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      menu.init();
    })
  </script>
</body>
</html>